<template>
  <uni-popup ref="reportPopup" type="center">
    <view class="report-box">
      <view class="report-head">
        <text class="report-head-title">举报</text>
        <image class="report-head-icon" src="/static/images/close.png" mode="" @tap="$refs.reportPopup.close()"></image>
      </view>
      <view class="report-content">
        <text class="report-title">举报原因</text>
        <view class="report-list">
          <view class="report-item" v-for="(item, index) in reportList" :key="index" :class="{ active: active == index }"
            @click="active = index">
            <text class="report-text">{{ item }}</text>
            <image class="report-img" src="/static/images/checked.png" v-if="active == index"></image>
            <view class="report-check" v-else></view>
          </view>
        </view>
      </view>
      <view class="report-btn" @tap="handleSubmit">
        <text class="report-btn-text">确定</text>
      </view>
    </view>
  </uni-popup>
</template>
<script>
export default {
  data () {
    return {
      reportList: ['帖子内容虚假', '中介', '个人资料虚假', '诈骗', '其他'],
      active: 0,
    }
  },
  methods: {
    handleOpen () {
      this.$refs.reportPopup.open()
    },
    handleSubmit () {
      this.$emit("submit", this.reportList[this.active])
      this.$refs.reportPopup.close()
    }
  },
} 
</script>
<style lang="scss" >
//举报弹窗
.report-box {
  width: 700rpx;
  background: #322053;
  border-radius: 23rpx 23rpx 23rpx 23rpx;
  overflow: hidden;
  padding-bottom: 46rpx;
}

.report-head {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  height: 117rpx;
  background: #452D70;
  padding: 0 41rpx
}

.report-head-title {
  font-weight: 600;
  font-size: 35rpx;
  color: #FFFFFF;
  line-height: 53rpx;
}

.report-head-icon {
  height: 42.19rpx;
  width: 42.19rpx;
}


.report-content {
  padding: 23rpx 29rpx 46rpx 29rpx;
}

.report-list {
  background: #190934;
  border-radius: 12rpx 12rpx 12rpx 12rpx;
  margin-top: 23rpx;
  padding: 23rpx;
}

.report-item {
  flex-direction: row;
  display: flex;
  justify-content: space-between;
  align-items: center;

}

.report-item+.report-item {
  margin-top: 23rpx;
}

.report-title {
  font-weight: 600;
  font-size: 33rpx;
  color: #B9B9B9;
  line-height: 53rpx;
}

.report-text {
  font-weight: 400;
  font-size: 33rpx;
  color: #B9B9B9;
  line-height: 53rpx;
}

.report-check {
  height: 37.5rpx;
  width: 37.5rpx;
  border: 2rpx solid #fff;
  border-radius: 50%;
}

.report-img {
  height: 40rpx;
  width: 40rpx;
}

.report-btn {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  border-radius: 12rpx 12rpx 12rpx 12rpx;
  border: 2rpx solid #2FA0F3;
  margin: 0 30rpx;
}

.report-btn-text {
  font-weight: 800;
  font-size: 35rpx;
  color: #29A7F6;
  width: 500rpx;
  height: 94rpx;
  line-height: 94rpx;
  text-align: center;
}
</style>